<template>
	<view>
		<view class="vip-box columnbox wdh-100" v-if="show">
			<image src="/static/img/vip-title.png" mode="widthFix" class="vip-title-img"></image>
			<view class="rowbox vip-list-box">
				<scroll-view scroll-y class="vip-list">
					<view v-for="(item,index) in viplist" :key='index' class="one-vip rowbox spb"
						@click="submitOrder(item)">
						<view class="vip-price">¥{{item.price}}</view>
						<view class="vip-line columnbox">
							<view></view>
							<view></view>
							<view></view>
						</view>
						<view class="vip-desc">{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
			<view class="close-icon rowbox" @click="show=false">
				<u-icon name="close" size="40rpx" color="#fff"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "vipbuy",
		data() {
			return {
				viplist: [],
				show: false
			};
		},
		mounted() {
			this.getVipList()
		},
		methods: {
			getVipList() {
				// this.$req.post('/user/vippackagelist', {
				// 	uid: uni.getStorageSync('uid')
				// }).then(res => {
				// 	this.viplist = res.data.data
				// })
			},
			// buyVip(val) {
			// 	if (!this.submitflag) {
			// 		this.submitflag = true
			// 		uni.showLoading({
			// 			title: '加载中'
			// 		})
			// 		this.$req.post('/user/ordergenerate', {
			// 			uid: uni.getStorageSync('uid'),
			// 			vippackageid: val.id
			// 		}).then(res => {
			// 			if (res.data.code == 0) {
			// 				this.toPay(res.data.data)
			// 			} else {
			// 				this.submitflag = false
			// 				uni.hideLoading()
			// 				uni.showModal({
			// 					title: '下单失败',
			// 					content: res.data.msg
			// 				})
			// 			}
			// 		})
			// 	}
			// },
			submitOrder(val) {
				if (uni.getStorageSync('uid')) {
					if (!this.submitflag) {
						this.submitflag = true
						uni.showLoading({
							title: '加载中'
						})
						this.$req.post('/user/ordergenerate', {
							uid: uni.getStorageSync('uid'),
							vippackageid: val.id
						}).then(res => {
							if (res.data.code == 0) {
								if (res.data.state == 1) {
									uni.showToast({
										title: '支付成功',
										icon: 'success'
									})
									this.$req.post('/user/userInfo', {
										uid: uni.getStorageSync('uid')
									}).then(res => {
										if (res.data.data.phone == '' || res.data.data.shouquan == 2) {
											uni.navigateTo({
												url: '/pages/bindPhone/bindPhone'
											})
										} else {}
									})
								} else {
									this.toPay(res.data.data)
								}
							} else {
								this.submitflag = false
								uni.hideLoading()
								uni.showModal({
									title: '下单失败',
									content: res.data.msg
								})
							}
						})
					}
				} else {
					uni.navigateTo({
						url: '/pages/log/log'
					})
				}
			},
			toPay(id) {
				this.$req.post('/user/wechatpay', {
					id: id
				}).then(res => {
					let data = res.data.data
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.sign,
						success: res => {
							console.log('微信调起支付成功');
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})
							this.show = false
							this.$req.post('/user/userInfo', {
								uid: uni.getStorageSync('uid')
							}).then(res => {
								if (res.data.data.phone == '' || res.data.data.shouquan == 2) {
									uni.navigateTo({
										url: '/pages/bindPhone/bindPhone'
									})
								} else {

								}
							})
						},
						fail: err => {
							this.submitflag = false
							console.log('微信调起支付失败', err);
						},
						complete: () => {
							this.submitflag = false
							uni.hideLoading()
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.vip-box {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(#000, 0.7);
		width: 100%;
		height: 100vh;
		z-index: 10;

		.vip-title-img {
			width: 400rpx;
			height: 100rpx;
		}

		.vip-list-box {
			height: 540rpx;
			width: 590rpx;
			background: linear-gradient(to bottom, #E7583B, #EE3145);
			border-radius: 20rpx;
			padding: 20rpx 20rpx;
		}

		.vip-list {
			height: 500rpx;
			background: #fff;
			border-radius: 29rpx;
			width: 100%;
		}

		.one-vip {
			background: linear-gradient(to bottom, #FCA08D, #EC1C3A);
			padding: 40rpx 20rpx;
			border-radius: 32rpx;
			width: 90%;
			margin-left: 5%;
			margin-top: 20rpx;
			position: relative;

			.vip-price {
				color: #fff;
				font-weight: bold;
				font-size: 50rpx;
				width: 29%;
				text-align: center;
			}

			.vip-desc {
				font-size: 32rpx;
				color: #fff;
				width: 62%;
			}

			.vip-line>view:nth-child(1) {
				background: #fff;
				width: 20rpx;
				height: 20rpx;
				position: absolute;
				top: -10rpx;
				border-radius: 100rpx;
			}

			.vip-line>view:nth-child(2) {
				width: 2rpx;
				height: 100rpx;
				border-right: #fff dotted 1px;
			}

			.vip-line>view:nth-child(3) {
				background: #fff;
				width: 20rpx;
				height: 20rpx;
				position: absolute;
				bottom: -10rpx;
				border-radius: 100rpx;
			}
		}
	}

	.close-icon {
		border: #fff solid 2px;
		border-radius: 100rpx;
		width: 52rpx;
		height: 52rpx;
		margin-top: 20rpx;
	}
</style>